<template>
  <div class>
    <div class="swiper">
        <header>
            <img @click="left" src="@/assets/school/school.jpg" alt="">
            <p>老年大学职业技能培训</p>
        </header>
    
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>

    <ul>
      <li>
        <router-link to="/wrapper/Intro">
          <!-- <i class="slq-i1"></i> -->
          介绍
        </router-link>
      </li>
      <li>
        <router-link to="/wrapper/SignUp">
          <!-- <i class="slq-i2"></i> -->
          报名
        </router-link>
      </li>
      <li>
        <router-link to="/wrapper/course">
          <!-- <i class="slq-i3"></i> -->
          课程
        </router-link>
      </li>
    
      <li>
        <router-link to="/wrapper/Record">
          <!-- <i class="slq-i4"></i> -->
          学历
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
    <div>
        
    </div>
  </div>
</template>
<script>
import { Lazyload } from "vant";
export default {
  name: "",
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
      list: [
        {
        //   name: "课程",
          show: false,
          path: "/Intro"
        },
        {
        //   name: "约课记录",
          show: false,
          path: "/SignUp"
        },
        {
        //   name: "练习",
          show: false,
          path: "/course"
        },
        {
        //   name: "我的",
          show: false,
          path: "/Record"
        }
      ]
    };
  },
  props: {},
  components: {},
  mounted() {
    
  },
  methods: {
    left(){
      this.$router.go(-1)
    }
  },
  watch: {}
};
</script>

<style scoped>
html {
    background: #000;
  }
header{
    background: #000;
    height: 73px;

}
header img{
    width: 49px;
    height: 74px;
}
header span{
    color: #fff;
    margin: 0 auto;
    font-size: 30px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    width: 687px;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
ul {
  background: #000;
    line-height: 120px;
    height: 120px;
  list-style: none;
  display: flex;
  width: 100%;
  left: 0;
}
ul li {
  height: 120px;
  color: #fff;
  font-size: 27px;
  flex: 1;
  text-align: center;
}
li:nth-of-type(1) .router-link-active i {
  display: block;
  width: 30px;
  height: 30px;
  /* background: url("../assets/img/home-active.png") 100% 100% no-repeat; */
  background-size: 100%;
}
li:nth-of-type(2) .router-link-active i {
  display: block;
  width: 30px;
  height: 30px;
  /* background: url("../assets/img/course-active.png") 100% 100% no-repeat; */
  background-size: 100%;
}
li:nth-of-type(3) .router-link-active i {
  display: block;
  width: 30px;
  height: 30px;
  /* background: url("../assets/img/study-active.png") 100% 100% no-repeat; */
  background-size: 100%;
}
li:nth-of-type(4) .router-link-active i {
  display: block;
  width: 30px;
  height: 30px;
  /* background: url("../assets/img/edit-active.png") 100% 100% no-repeat; */
  background-size: 100%;
}
li:nth-of-type(5) .router-link-active i {
  display: block;
  width: 30px;
  height: 30px;
  /* background: url("../assets/img/my-active.png") 100% 100% no-repeat; */
  background-size: 100%;
}
</style>